<!DOCTYPE html>
<html>
	<head>
		<title>
			Familibook >> Choose Placement ({{ firstname }} {{ lastname }})
		</title>
		<link rel="stylesheet" href="css/style.css" />
		<script src="js/jquery-1.3.2.js"></script>
		<!--[if IE 6]>
			<script src="js/ie6-transparency.js"></script>
			<script>
				DD_belatedPNG.fix('#header .logo img, .subtitle img, .slideshow-container, .navigation-container #thumbs .thumbs li .thumb img, .navigation a.next, .footer-line, #sidebar .author-photo, .line, .commentlist .comment-reply-link, #contact-page #contact .submit');
			</script>
			<link rel="stylesheet" type="text/css" href="styles/ie6.css" />
		<![endif]-->
		<!--[if IE 7]>
			<link rel="stylesheet" type="text/css" href="styles/ie7.css" />
		<![endif]-->
		<!--[if IE 8]>
			<link rel="stylesheet" type="text/css" href="styles/ie8.css" />
		<![endif]-->
		<script type="text/javascript">
			function capturelocation(){
				var ctx = canvas.getContext('2d');
				setSizes();
				setEventListener();
			}
			
			function setSizes(){
				canvas.width = document.width - 150;
				canvas.height = document.height - 25;
				inputx.style.width = "30px";
				inputy.style.width = "30px";
			}
			
			function setEventListener(){
				canvas.addEventListener('mousedown', function (e){
					var mousepos = getMousePos(canvas, e);
					inputx.value = mousepos.x;
					inputy.value = mousepos.y;
				}, false);
			}
			
			function getMousePos(canvas, evt) {
				var obj = canvas;
				var top = 0;
				var left = 0;
				while (obj.tagName != 'BODY') {
					top += obj.offsetTop;
					left += obj.offsetLeft;
					obj = obj.offsetParent;
				}
				var mouseX = evt.clientX - left + window.pageXOffset;
				var mouseY = evt.clientY - top + window.pageYOffset;
				return {
					x: mouseX,
					y: mouseY
				};
			}
		</script>
	</head>
	<body onload="capturelocation();">
		<div id="wrap"> 
			<div id="header"> 
				<div class="logo">                	                                        
					<a href="/"><img src="pics/logo.png" alt="logo" /></a>                 
				</div>
				<div id="nav">
					<ul id="nav-pages">                 	     	
						<li>
							<a href="/" class="current">
								Home
							</a>
							<span>
								~
							</span>
						</li>
						<li>
							<a href="/sign?type=new">
								Register
							</a>
						</li>
            		</ul>
				</div>          
            </div>
			<div id="detail-content">
				<div id="container2" align="left" style="text-align: left;">
					<table border="0">
						<tbody>
							<tr>
								<td>
									<canvas style="border: 3px solid black" height="200" width="300" id="canvas"></canvas>
								</td>
								<td>
									<form method="post" action="/doit">
										x: &nbsp;&nbsp; <input id="inputx" type="text" value="0" name="x" />
											<br />
										<input type="hidden" name="spouseusi" value="{{ spouseusi }}" />
										<input type="hidden" name="firstname" value="{{ firstname }}" />
										<input type="hidden" name="lastname" value="{{ lastname }}" />
										<input type="hidden" name="fatherusi" value="{{ fatherusi }}" />
										<input type="hidden" name="motherusi" value="{{ motherusi }}" />
										<input type="hidden" name="sex" value="{{ sex }}" />
										<input type="hidden" name="date" value="{{ d }}" />
										<input type="hidden" name="month" value="{{ m }}" />
										<input type="hidden" name="year" value="{{ y }}" />
											<br />
										y: &nbsp;&nbsp; <input id="inputy" type="text" value="0" name="y" />
											<br />
											<br />
										<input value="Submit" type="submit" />
									</form>
								</td>
							</tr>
						</tbody>
					</table>
				</div>
				<div id="footer"> 
					<div class="footer-line">Copyright &copy; 2011 &middot; PikuSoft &middot; All Rights Reserved</div>
				</div>
			</div>
	</body>
</html>